<template>
  <!--  逾期金额-->
  <div class="should-amount-filter">
    <div class="should-amount-filter__items">
      <div class="item">
        <el-select style="width: 88px" :teleported="false" v-model="filterListData[0].compare">
          <el-option v-for="item in filterListData[0].condition" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <div class="item__input">
          <el-input
            type="number"
            :min="0"
            placeholder="请输入"
            v-model.number="filterListData[0].value[0]"
            @input="changeInput"
          />
          <span>元</span>
        </div>
      </div>
    </div>
    <div class="should-amount-filter__buttons">
      <el-button type="primary" class="buttons-cancel" link size="default" @click="handelReset">重置</el-button>
      <el-button type="primary" class="buttons-confirm" size="default" @click="handelConfirm">确定</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, watch } from "vue";

const props = defineProps({
  filterList: {
    type: Array,
    default: () => [
      {
        title: "逾期金额",
        filterId: "time_out_amount",
        condition: [
          {
            label: "大于",
            value: "ge"
          },
          {
            label: "小于",
            value: "le"
          },
          {
            label: "等于",
            value: "eq"
          }
        ],
        option: {
          type: "SelectInput",
          lazy: false,
          dataSource: {},
          data: []
        },
        compare: "ge",
        value: []
      }
    ]
  }
});
const emit = defineEmits(["handelFilterData"]);

const { proxy } = getCurrentInstance();

/**
 * 校验天数
 */
const changeInput = e => {
  if (e < 0) {
    filterListData.value[0].value = [""];
    proxy.$modal.msgError("金额输入错误");
  }
};

const filterListData = ref([]);
watch(
  () => props.filterList,
  newVal => {
    filterListData.value = [...newVal];
  },
  { deep: true, immediate: true }
);

const handelReset = () => {
  filterListData.value[0].value = [""];
  filterListData.value[0].compare = "ge";
  emit("handelFilterData", filterListData.value);
};
const handelConfirm = () => {
  emit("handelFilterData", filterListData.value);
};
</script>

<style scoped lang="scss">
@import "timeOutAmount";
</style>
